<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<head>
    <%- include('../component/head') %>
</head>
<body>
<div id="fh5co-page">

    <!-- 左边菜单 -->
    <%- include('../component/admin/left_menu') %>


    <div id="fh5co-main">
        <%- include('../component/admin/banner') %>

        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header bg-primary text-white d-flex justify-content-between">
                        <h6 class="mb-0 align-self-center" style="color: white;">类目列表</h6>
                    </div>
                    <div class="card-body" id="tables">

                        <vxe-toolbar>
                            <template #buttons>
                                <vxe-button icon="fa fa-plus" @click="insertEvent()">新增</vxe-button>
                            </template>
                        </vxe-toolbar>

                        <vxe-table
                                border
                                resizable
                                show-overflow
                                highlight-hover-row
                                ref="xTable"
                                height="500"
                                :data="tableData"
                                @cell-dblclick="cellDBLClickEvent">
                            <vxe-table-column type="seq" width="60"></vxe-table-column>
                            <vxe-table-column field="id" title="id"></vxe-table-column>

                            <vxe-table-column field="la_name" title="标签名称"></vxe-table-column>
                            <vxe-table-column field="la_describe" title="标签描述" show-overflow></vxe-table-column>
                            <vxe-table-column field="la_img" title="标签图片" show-overflow>
                                <template #default="{ row }">
                                    <img v-if="row.la_img" :src="row.la_img"
                                         style="width: 100px;margin: 5px">
                                    <span v-else>无</span>
                                </template>
                            </vxe-table-column>

                            <vxe-table-column title="操作" width="100" show-overflow>
                                <template #default="{ row }">
                                    <vxe-button type="text" icon="fa fa-edit" @click="editEvent(row)"></vxe-button>
                                    <vxe-button type="text" icon="fa fa-trash-o" @click="removeEvent(row)"></vxe-button>
                                </template>
                            </vxe-table-column>
                        </vxe-table>

                        <vxe-modal v-model="showEdit" :title="selectRow ? '编辑&保存' : '新增&保存'" width="800" min-width="600"
                                   min-height="300" :loading="submitLoading" resize destroy-on-close>
                            <template #default>
                                <vxe-form :data="formData" :rules="formRules" title-align="right"
                                          title-width="100" @submit="submitEvent">

                                    <vxe-form-item title="标签名称" span="12" field="la_name">
                                        <template #default="{ data }">
                                            <vxe-input v-model="data.la_name" placeholder="请输入名称"></vxe-input>
                                        </template>
                                    </vxe-form-item>
                                    <vxe-form-item title="标签描述" span="12" field="la_describe">
                                        <template #default="{ data }">
                                            <vxe-input v-model="data.la_describe" placeholder="请输入描述"></vxe-input>
                                        </template>
                                    </vxe-form-item>
                                    <vxe-form-item title="标签图片" span="12" field="la_img">
                                        <template #default="{ data }">
                                            <img v-if="data.la_img" :src="data.la_img" @click="upImg(data)"
                                                 style="width: 100px;margin: 5px">
                                            <div v-else>
                                                <vxe-button @click="upImg(data)" icon="fa fa-download"
                                                            style="margin-bottom: 5px">上传图片
                                                </vxe-button>
                                            </div>
                                            <p>已选文件：{{ fileImg.name }}</p>
                                            <div class="progress">
                                                <div class="progress-bar progress-bar-info" role="progressbar"
                                                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                                     :style="{ width: progressText }">
                                                </div>
                                            </div>

                                        </template>
                                    </vxe-form-item>
                                    <vxe-form-item align="center" span="24">
                                        <template #default>
                                            <vxe-button type="submit" status="primary">提交</vxe-button>
                                            <vxe-button type="reset">重置</vxe-button>
                                        </template>
                                    </vxe-form-item>

                                </vxe-form>
                            </template>
                        </vxe-modal>

                        <vxe-pager
                                :current-page.sync="page4.currentPage"
                                :page-size.sync="page4.pageSize"
                                :total="page4.totalResult"
                                :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
                        </vxe-pager>

                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

<%- include('../component/admin/foot') %>
<script>
    const $VXE = VXETable.modal;
    const $XSaveFile = VXETable.saveFile;
    const $XReadFile = VXETable.readFile;
    new Vue({
        el: '#tables',
        data: {
            fileImg: '',
            progressText: '0',
            submitLoading: false,
            tableData: [],
            selectRow: null,
            showEdit: false,
            formData: {
                username: null,
                email: null
            },
            formRules: {
                la_name: [
                    {required: true, message: '请输入名称'}
                ]
            },
            page4: {
                currentPage: 1,
                pageSize: 10,
                totalResult: 7
            },
        },
        created() {
            this.getData();
            mainFun();
        },
        methods: {
            upImg() {
                $XReadFile().then(params => {
                    const {files} = params;
                    Array.from(files).map(file => {
                        this.fileImg = file;
                    })
                })
            },
            upData(row, url) {
                this.submitLoading = false;
                const than = this;
                let file = this.fileImg;
                let progress = new XEAjax.Progress()
                progress.onUploadProgress = evnt => {
                    let value = progress.value
                    than.progressText = `${value}%`
                    if (value === 100) {
                        setTimeout(() => {
                            than.progressText = '0%';
                            than.fileImg = {name:''};
                            this.showEdit = false;
                        },500);
                    }
                }
                let formBody = new FormData()
                formBody.append('photo', file)
                formBody.append('row', JSON.stringify(row));
                XEAjax.fetchPost(url, formBody, {progress}).then(res => {
                    console.log(res.msg)
                    than.getData();
                }).catch(err => {
                    $VXE.message({message: '未知错误！错误代码：' + JSON.stringify(err), status: 'error'});
                });
            },
            getData() {
                XEAjax.post('/label/label.getAll').then((res) => {
                    if (res.msg === 's') {
                        this.tableData = res.labelList;
                        $VXE.message({message: "标签数据更新", status: 'success'});
                    } else {
                        $VXE.message({message: "获取标签失败", status: 'error'});
                    }
                }).catch((err) => {
                    $VXE.message({message: '未知错误！错误代码：' + JSON.stringify(err), title: '错误', status: 'error'});
                });
            },
            cellDBLClickEvent({row}) {
                this.editEvent(row)
            },
            insertEvent() {
                this.formData = {
                    la_name: '',
                    la_describe: '',
                    la_img: ''
                }
                this.selectRow = null;
                this.showEdit = true;
            },
            editEvent(row) {
                this.formData = {
                    la_name: row.la_name,
                    la_describe: row.la_describe,
                    la_img: row.la_img
                }
                this.selectRow = row
                this.showEdit = true
            },
            removeEvent(row) {
                $VXE.confirm('您确定要删除该数据?').then(type => {
                    if (type === 'confirm') {
                        XEAjax.post('/label/label.del', row).then((res) => {
                            if (res.msg === 's') {
                                $VXE.message({message: '删除成功', status: 'success'});
                                this.getData();
                            } else {
                                $VXE.message({message: '删除失败', status: 'error'});
                            }

                        }).catch((err) => {
                            $VXE.message({message: '未知错误！错误代码：' + JSON.stringify(err), status: 'error'});
                        });
                    }
                })
            },
            submitEvent() {
                this.submitLoading = true
                if (this.selectRow) {
                    Object.assign(this.selectRow, this.formData);
                    this.upData(this.selectRow,'/label/multer/up');
                } else {
                    this.upData(this.formData,'/label/multer/add');
                }

            }
        }
    })
</script>
</body>
</html>
